<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <style>
        *, *::after, *::before {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 100px;
        }

        body {
            font-size: .22rem;
        }

        .footer {
            width: 100%;
            height: 100px;
        }
        #app{
            width: 375px;
        }
        .content {
            width: 7.2rem;
            background-color: #f5f5f5;
            margin: 0 auto;
            overflow: auto;
        }



        .footer {
            width: 100%;
            /*height: 100px;*/
            display: flex;
            height: 60px;

        }

        .footer a {
            /*height: 100px;*/
            width: 25%;
            /*line-height: 100px;*/
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            text-decoration: none;
        }

        .footer .normal {
            color: #999;
        }

        .footer .active {
            color: #00a4ff;
        }

        .footer a i {
            display: block;
            padding-top: 20px;
            /*height: 50px;*/
            width: 100%;
            /*padding-top: 25px;*/
            text-align: center;

        }

        .footer a span {
            display: block;
            /*height: 50px;*/
            width: 100%;
            /*line-height: 25px;*/
            /*padding-bottom: 25px;*/
            text-align: center;
        }
        .swapper7{
            width: 100%;
            height: 1300px;
            position: relative;
            text-decoration: none;
        }
        .swapper7 .cxk{
            width: 100%;
            height: 190px;
            margin-top: 10px;
            background-color: #FFFFFF;

        }

        .cxk .photo{
            width: 40px;
            height: 40px;
            margin-left: 15px;
            margin-top: 15px;
            /*background-color: blue;*/
            display: inline-block;

        }
        /*.photo img{*/
        /*width: 82px;*/
        /*height: 82px;*/
        /*display: inline-block;*/

        /*}*/
        .cxk a{
            text-decoration: none;

        }
        .pop{
            width: 315px;
            height: 82px;
            /*background-color: yellow;*/
            display: inline-block;
            vertical-align:top;
            margin-top: 3px;
            position: relative;
        }
        .play{
            width: 200px;
            height: 32px;

            position: relative;
            display: inline-block;
            bottom: 8px;
        }
        .play i{
            position: absolute;
            bottom: 12px;


        }
        /*.cxk h3{*/
            /*display: inline-block;*/
            /*width: 165px;*/
            /*height: 32px;*/
            /*vertical-align: top;*/
            /*margin-left: 10px;*/
            /*overflow: hidden;*/
            /*text-overflow: ellipsis;*/
            /*white-space: nowrap;*/

        /*}*/
        .cxk .game{
            font-size: 0.34rem;
            display: inline-block;
            color: #333;
            font-weight: 700;
            /*margin-top: 10px;*/
            display: inline-block;
            width: 165px;
            height: 32px;
            vertical-align: top;
            margin-left: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .cxk .aline{
            width: 300px;
            height: 17px;
            /*background-color: blue;*/

            display: inline-block;
            color: #999999;
            position: absolute;
            top:42px ;
            right: 4px;

        }
        /*.aline div{*/
            /*width: 310px;*/
            /*height: 17px;*/
        /*}*/
        .pop .index-omit_1q3Tw0_{
            display: inline-block;
            margin-left: 10px;
            margin-top: 15px;
            color: #333333;
            font-size: .3rem;
        }


        .momo{
            width: 310px;
            height: 17px;
            color: #666666;

            margin-top: 40px;
            display: inline-block;
            font-size: 0.25rem;
        }
        .momo .live{
            width: 100px;
            height: 17px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            flex: 1;
        }
        .momo .list{

            float: right;
            font-size: .3rem;
            color: #333;
            font-weight: 700;
        }
        /*.last{*/
            /*width: 320px;*/
            /*height: 85px;*/


        /*}*/
        .cxk .ctrl{
            width: 310px;
            height: 20px;
            margin-top: 5px;
            margin-left: 15px;
        }
        .ctrl span{
            text-decoration: none;
            color: #666666;
        }
        .center{
            width: 100%;
            height: 50px;
            /*margin-left: 30px;*/
            display: inline-block;
        }
        .center .center1{
            padding:3px 8px  3px 8px;
            border: 1px solid #2395ff;
            border-radius:4px;
            background-color: transparent;
            outline: none;
            font-size:0.25rem;
            color: #2395ff;
            margin-left:190px;
            margin-top:45px;
            display: inline-block;
        }
        .center .center2{
            padding:4px 10px  4px 10px;
            border: 1px solid  #ff5339;
            border-radius:4px;
            background-color: transparent;
            outline: none;
            font-size:0.25rem;
            color: #ff5339;
            margin-top: 7px;
        }
        .play i{
            color: #999999;
        }
    </style>
</head>
<div id="app">
    <div class="content">
        <div class="swapper7" id="kun">
            <ul>
                <li v-for="sky in skys">
                    <a href="">
                        <div class="cxk">
                            <img :src="sky.img" alt="" class="photo">

                            <div class="pop">
                                <div class="play">
                               <span class="game"> {{ sky.name }}</span>
                                    <i :class="sky.name5"></i>
                                </div>

                                <span class="index-omit_1q3Tw0_">{{ sky.name4 }}</span>
                                <div class="aline">
                                    <div>{{ sky.name1 }}</div>
                                    <div>{{ sky.name2 }}</div>

                                </div>
                                <div class="momo">
                                    <span class="live">{{ sky.name6 }}</span>
                                    <span class="list">{{ sky.name8 }}</span>

                                </div>
                            </div>
                            <div class="last">
                                <div class="ctrl"><span>{{ sky.name12}}</span></div>
                                <div class="center">
                                   <button class="center1">
                                       {{ sky.name7}}
                                   </button>
                                   <button class="center2">
                                       {{ sky.name11}}
                                   </button>
                                </div>

                            </div>
                        </div>

                    </a>

                </li>
            </ul>
        </div>

    </div>

    <div class="footer" >

        <a :href="item.url" v-for="(item,index) in items" :class="{normal:item.normal,active:item.active}"
           @click="active(index)">
            <i :class="item.photo"></i>
            <span>{{item.name}}</span>
        </a>

    </div>
</div>
<body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            skys: [
                {
                    name: "粥宫壹号(软三中交和美店)",
                    img: "https://fuss10.elemecdn.com/f/2b/ba1f5303be51b51ece5bc74d01f71jpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",
                    img1: "",
                    name1: "20小时40分钟前",
                    name4: "订单已送达",
                    name5:"fa fa-chevron-right",
                    name6: "小肠粥等2件商品",
                    name7: "再来一单",
                    name8: "¥11.90",
                    name11: "评价获得金币",

                },
                {
                    name: "永悦福餐厅",
                    img: "https://fuss10.elemecdn.com/c/cc/a0e70e92b62f9aaf61ce3f784acd3jpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",

                    name1: "16小时27分钟前",
                    name4: "订单已送达",
                    name5:"fa fa-chevron-right",
                    name6: '卤鸭+饭+配菜+饮料',

                    name7: "再来一单",
                    name8: "¥12.40",
                    name11: "评价获得金币",

                },

                {
                    name: "一品便当",
                    img: "https://fuss10.elemecdn.com/a/d3/470476c466613e1c589e05b02370apng.png?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",

                    name1: "18小时16分钟前",
                    name4: "订单已送达",
                    name5:"fa fa-chevron-right",
                    name6: '水煮肉片饭要自己点哦等2件商品',
                    name7: "再来一单",
                    name8: "¥13.40",
                    name11: "评价获得金币",

                },
                {
                    name: "南嘟猪脚饭(软件园三期店)",
                    img: "https://fuss10.elemecdn.com/b/7e/dd0e4e74eea7fdc252fe92246434djpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",

                    name1: "2019-06-20 17:25",
                    name4: "订单已送达",
                    name5:"fa fa-chevron-right",
                    name6: '\n' +
                    '            咸水鸭套餐+蛋+俩配菜+小菜\n' +
                    '          ',
                    name7: "再来一单",
                    name8: "¥17.00",
                    name11: "评价获得金币",

                },
                {
                    name: "每天粥铺(软三店)",
                    img: "https://fuss10.elemecdn.com/0/b0/0ae1602d5500f34daaf0a104ecd4ejpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",

                    name1: "2019-06-18 08:36",
                    name4: "订单已送达",
                    name5:"fa fa-chevron-right",
                    name6: '韭菜盒子（2个）等2件商品',
                    name7: "再来一单",
                    name8: "¥9.90",
                    name11: "评价获得金币",

                },
                {
                    name: "临茶(软三店)",
                    img: "https://fuss10.elemecdn.com/6/0e/49940f7c531aa2b0a3c94cc08568ajpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",

                    name1: "2019-06-17 14:20",
                    name4: "订单已送达",
                    name5:"fa fa-chevron-right",
                    name6: '金钻波霸奶绿-中杯',
                    name7: "再来一单",
                    name8: "¥13.89",
                    name11: "评价获得金币",

                },
                {
                    name: "烧腊先生",
                    img: "https://fuss10.elemecdn.com/f/47/efbe487d16a8fab006add2e37a52ejpeg.jpeg?imageMogr/format/webp/thumbnail/!64x64r/gravity/Center/crop/64x64/",

                    name1: "2019-06-04 16:53",
                    name4: "订单已送达",
                    name5:"fa fa-chevron-right",
                    name6: '招牌烧鸭饭',
                    name7: "再来一单",
                    name8: "¥17.50",
                    name11: "评价获得金币",

                }
                ],
            items: [
                {
                    id: 1,
                    photo: "fa fa-edge fa-2x",
                    name: "首页",
                    normal: false,
                    active: true,
                    url:"饿了么.html"
                },
                {
                    id: 2,
                    photo: "fa fa-compass fa-2x",
                    name: "发现",
                    normal: true,
                    active: false
                },
                {
                    id: 3,
                    photo: "fa fa-file-text-o fa-2x",
                    name: "订单",
                    normal: true,
                    active: false,

                },
                {
                    id: 4,
                    photo: "fa fa-user fa-2x",
                    name: "我的",
                    normal: true,
                    active: false,
                    url:"登录.html"
                }
            ],
        },
        methods: {
            active: function (index) {
                var i = 0;
                for (; i < this.items.length; i++) {
                    if (this.items[i].id != this.items[index].id) {
                        this.items[i].normal = true;
                        this.items[i].active = false;
                    }
                }
                this.items[index].normal = false;
                this.items[index].active = true;

            },
            late: function (change) {
                this.change = change;
            }
        },

    })
</script>
<script>
    function resizei() {
        var fs_maxrem = 100;

        var max_width = 720;
        var w_width = window.innerWidth;//获取窗口宽度
        var fsrem = 100;//表示当前的大小


        if (w_width > max_width) {//如果超过最大值，则fs保持最大值
            fsrem = fs_maxrem;
        } else {
            fsrem = fs_maxrem * w_width / max_width;//根据当前的屏幕大小得到当前的fsrem
        }

        document.documentElement.style.fontSize = fsrem + "px";
    }

    resizei();
    //添加窗口大小改变的事件
    window.onresize = function () {
        resizei();
    }
</script>

<script>
    function peizhi() {
        //1.设置body高度等于window高度
        var height = window.innerHeight;

        document.body.style.height = height + "px";
        document.body.style.backgroundColor = "";


        //2. 设置content块等于body的高度减去一头一尾的高度
        var content_height = 0;

        content_height = height - 0 - 60;

        var contentDom = document.querySelector(".content");
        contentDom.style.height = content_height + "px";
    }

    window.onload = function () {
        peizhi()

    }
    window.onresize = function () {
        peizhi()
    }

</script>
</body>
</html>